<template>
  <div class="page_set">
    <!-- 法币设置 -->
    <div class="content_leset">
      <div class="leset_head">
        <section class="g-full-header">
          <div class="g-full-in flex-between-center overflow-hide">
            <div class="flex-y-center mobile-header">
              <div class="spe-mobile-layout">
                <div class="avatar-container cursor bigger zero">
                  <em class="name" style="display:;">收</em>
                  <div class="online-icon">
                    <p class="online-status"></p>
                  </div>
                  <!---->
                </div>
                <div class="flex-y-center mobile-name">
                  <span class="spe-color font24 font5">收</span>
                  <i class="merchant-level merchant-level0"></i>
                </div>
              </div>
              <div class="spe-color base-info">
                <div class="flex-y-center indent">
                  <span class="spe-color font24">收款方式管理</span>
                  <i class="merchant-level merchant-level0"></i>
                </div>
                <div class="font12 over-info" style="display:none">
                  <span class="line mobile-line">
                    <span>总成单: 0</span>(
                    <span class="buy font-bold">买</span>0 |
                    <span class="sell font-bold">卖</span>0 ) 次
                  </span>
                  <span class="line mobile-line">
                    <span>30日成单：0次</span>
                  </span>
                  <span class="line mobile-line">
                    <span>30日总完成率：0%</span>（
                    <span class="buy font-bold">买</span>0.00%）
                  </span>
                  <span class="line mobile-line">
                    <span>30日平均取消：2.75分钟</span>
                  </span>
                  <span class="mobile-line">
                    <span>平均放行：0.00分钟</span>
                  </span>
                </div>
              </div>
            </div>
            <p class="spilte-in"></p>
            <div class="apply_btn">
              <el-button type="primary" @click="navigateTo('/FrTrade/business')">广告权限申请</el-button>
              <!-- iconfont icon-apply-flag -->
            </div>
          </div>
        </section>
      </div>
      <!-- cont -->
      <div class="container myinvite">
        <div class="invite-total">
          <div class="g-user">
            <section class="g-user-layout">
              <div class="g-user-title">
                <span data-weight="1">收款方式</span>
                <span data-type="1" class="font12 font-gray">请务必使用您本人的实名账户，被激活的收款方式将在交易时向买方展示，最多激活3种</span>
              </div>
              <div class="g-user-col" style>
                <div
                  date-type="mobile"
                  class="flex-between-center g-user-list font-black no-border"  v-show="paylists.bankcard!=''"
                >
                  <div class="left-in flex-y-center flex-start">
                    <img
                      src="../../assets/images/personalCenter/bank.png"
                      alt="pay"
                      class="m-img pay-iconfont"
                    />
                    <div class="m-layout-inner font5">
                      <div class="real-name">{{paylists.username}}</div>
                      <div class="flex-auto">
                        <span class="bank-info">{{paylists.bankcard}}</span>
                        <span class="text-separator">{{paylists.khyh}}</span>
                        <span class="text-separator">{{paylists.khzh}}</span>
                        <span></span>
                      </div>
                    </div>
                  </div>
                  <div class="right-in pay-right flex-y-center">
                    <span class="space font12 font-blue cursor spe-hover">修改</span>
                  </div>
                </div>
                <!-- 支付宝 -->
                <div
                  date-type="mobile"
                  class="flex-between-center g-user-list font-black no-border"  v-show="paylists.zfb!=''"
                >
                  <div class="left-in flex-y-center flex-start">
                    <img
                      src="../../assets/images/personalCenter/zhi.png"
                      alt="pay"
                      class="m-img pay-iconfont"
                    />
                    <div class="m-layout-inner font5">
                      <div class="paynum">{{paylists.zfb}}</div>
                      <div class="flex-auto">
                        <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="seeImg(paylists.zfbimg)">查看图片</el-button> -->
                      </div>
                    </div>
                  </div>
                  <div class="right-in pay-right flex-y-center">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="seeImg(paylists.zfbimg)">查看收款码</el-button> 
                  </div>
                </div>
                <!-- 微信 -->
                <div
                  date-type="mobile"
                  class="flex-between-center g-user-list font-black no-border"  v-show="paylists.wx!=''"
                >
                  <div class="left-in flex-y-center flex-start">
                    <img
                      src="../../assets/images/personalCenter/weichat.png"
                      alt="pay"
                      class="m-img pay-iconfont"
                    />
                    <div class="m-layout-inner font5">
                      <div class="paynum">{{paylists.wx}}</div>
                      <div class="flex-auto">
                        <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="seeImg(paylists.wximg)">查看图片</el-button> -->
                        <span></span>
                      </div>
                    </div>
                  </div>
                  <div class="right-in pay-right flex-y-center">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="seeImg(paylists.wximg)">查看收款码</el-button>
                  </div>
                </div>
                <div class="add-list flex-end-center" style="display:;"  @click="bindHandle('tel')">
                  <i class="iconfont icon-tianjia font-blue" style="font-size:16px;"></i>
                  <span class="cursor font-blue spe-hover">添加或修改收款方式</span>
                </div>
              </div>
              <div class="text-center empty" style="display: none;">
                <div class="loading-box" style="display: none;">
                  <div class="ivu-spin ivu-spin-default ivu-spin-fix ivu-spin-show-text">
                    <div class="ivu-spin-main">
                      <span class="ivu-spin-dot"></span>
                      <div class="ivu-spin-text">
                        <div class="loader">
                          <svg viewBox="25 25 50 50" class="circular">
                            <circle
                              class="path"
                              cx="50"
                              cy="50"
                              r="20"
                              fill="none"
                              stroke-width="5"
                              stroke-miterlimit="10"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <img  src="../../assets/images/user/bank.png" alt="no-data"  />
                <p class="font-gray">暂未添加收款方式</p>
                <button class="font-blue cursor"  @click="bindHandle('tel')">
                  <i class="iconfont icon-tianjia" style="font-size:16px;"></i>添加或修改收款方式
                </button>
              </div>
            </section>
            <section class="g-user-layout" style="display:none">
              <div class="g-user-title">
                <span data-weight="1">屏蔽名单</span>
                <span data-type="1" class="font12 font-gray">被屏蔽的用户将无法与您进行交易</span>
              </div>
              <div class="g-user-col" style="display:none;">
                <div class="add-list mobile-page flex-end-center" style="display:none;">
                  <ul class="ivu-page mini">
                    <!---->
                    <li title="上一页" class="ivu-page-prev ivu-page-disabled">
                      <a>
                        <i class="ivu-icon ivu-icon-ios-arrow-back"></i>
                      </a>
                    </li>
                    <li title="1" class="ivu-page-item ivu-page-item-active">
                      <a>1</a>
                    </li>
                    <!---->
                    <!---->
                    <!---->
                    <!---->
                    <!---->
                    <!---->
                    <!---->
                    <!---->
                    <!---->
                    <!---->
                    <li title="下一页" class="ivu-page-next ivu-page-disabled">
                      <a>
                        <i class="ivu-icon ivu-icon-ios-arrow-forward"></i>
                      </a>
                    </li>
                    <!---->
                  </ul>
                </div>
              </div>
              <div class="text-center empty" style="display:;">
                <div class="loading-box" style="display: none;">
                  <div class="ivu-spin ivu-spin-default ivu-spin-fix ivu-spin-show-text">
                    <div class="ivu-spin-main">
                      <span class="ivu-spin-dot"></span>
                      <div class="ivu-spin-text">
                        <div class="loader">
                          <svg viewBox="25 25 50 50" class="circular">
                            <circle
                              class="path"
                              cx="50"
                              cy="50"
                              r="20"
                              fill="none"
                              stroke-width="5"
                              stroke-miterlimit="10"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <img src="../../assets/images/user/icon_33.png" alt="">
                <p class="font-gray">暂无屏蔽用户</p>
              </div>
            </section>
            <section class="g-user-layout" style="display:none">
              <div class="g-user-title">
                <span data-weight="1">新消息提醒</span>
                <span data-type="1" class="font12 font-gray">我们会以邮件或短信的方式告知您法币订单的最新进展</span>
              </div>
              <div class="g-user-col">
                <div date-type="mes" class="flex-y-center g-user-list font-black bot_line">
                  <div class="left-in flex-y-center font5 m-block spc-m-block">
                    <i class="iconfont icon-email font-blue"></i>
                    <span class="new-notice">邮件通知</span>
                  </div>
                  <div class="right-in flex-y-center spe-radio-message">
                    <!-- 单选框 -->
                    <template>
                      <el-radio v-model="radio" label="1">在/离线时都接收</el-radio>
                      <el-radio v-model="radio" label="2">都不接收</el-radio>
                    </template>
                  </div>
                </div>
                <div date-type="mes" class="flex-y-center g-user-list font-black no-border">
                  <div class="left-in flex-y-center font5 m-block spc-m-block">
                    <i class="iconfont icon-xiaoxi font-blue"></i>
                    <span class="new-notice">短信通知</span>
                  </div>
                  <div class="right-in flex-y-center spe-radio-message">
                    <!-- 单选框 -->
                    <template>
                      <el-radio v-model="radio" label="1">在/离线时都接收</el-radio>
                      <el-radio v-model="radio" label="2">都不接收</el-radio>
                    </template>
                  </div>
                </div>
              </div>
            </section>
            <!---->
            <!---->
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <!-- 添加支付方式 -->
    <bind-tel
      :show='dialogId=="tel"?true:false'
      @closeModal='onClose'
    >
    </bind-tel>
    <el-dialog
      title="查看图片"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div class="dataimg">
        <img :src="dataimg" alt="">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import bindTel from "../../components/dialogContent/addGathering";
export default {
  components: {
    bindTel,
  },
  data() {
    return {
      paylists:{},
      radio:'1',
      activeName: 'first',
      dialogId: "",
      dialogVisible:false,
      dataimg:'',
      bindState: {
        emailstate: "0",
        idcardstate: "0",
      },
    };
  },
  mounted() {
    this.getmypaytype();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onClose() {
      this.dialogId = null;
      this.getmypaytype();
    },
    bindHandle(k, index) {
      let idState = this.bindState.idcardstate;
      if (k == "bankAccount") {
        if (idState == "0") {
          this.$confirm(this.$t("label137"), this.$t("label140"), {
            confirmButtonText: this.$t("label138"),
            cancelButtonText: this.$t("label139"),
            type: "warning"
          }).then(() => {
            this.navigateTo("Identify");
          });
          return;
        } else if (idState == "1") {
          this.$alert(this.$t("label141"), this.$t("label140"), {
            confirmButtonText: this.$t("label138")
          });
          return;
          
        }
      }
      this.dialogId = k;
    },
    getmypaytype() {
      this.request(this.api.getmypaytype).then(res => {
        if (res.code == "0") {
          this.paylists = res.data[0];
        }
      })
    },
    seeImg(data){
      this.dialogVisible=true;
      this.dataimg=data;
    }
  }
};
</script>

<style lang="scss" scoped>
.content_leset {
  .container {
    margin: 0 auto;
    width: 1200px;
  }
  .myinvite{
    min-height: 800px;
  }
  .g-full-header {
    width: 100%;
    background-color: #1b2945;
    padding: 46px 0;
    border-top: 1px solid #171c2c;
  }
  .g-full-in {
    width: 1200px;
    margin: 0 auto;
    .base-info {
      margin-left: 24px;
      .over-info {
        max-width: 720px;
        white-space: normal;
        word-break: break-all;
      }
    }
    .spe-color {
      color: #d2d6ec;
      line-height: normal;
    }
    .mobile-name {
      display: none;
    }
  }

  .avatar-container.zero {
    background: #5d8cc2;
  }
  .avatar-container.bigger {
    height: 56px;
    width: 56px;
    .name {
      font-size: 24px;
      color: #fff;
      font-style: normal;
    }
  }
  .avatar-container {
    height: 32px;
    width: 32px;
    justify-content: center;
    display: flex;
    align-items: center;
    border-radius: 50%;
    position: relative;
  }
  .pay-iconfont{width: 30px;height: 30px;}
}

//
.flex-between,
.flex-between-center {
  display: flex;
  justify-content: space-between;
}
.flex-between-center,
.flex-start-center {
  align-items: center;
}
.flex-center,
.flex-y-center {
  display: flex;
  align-items: center;
}
.flex-auto {
    flex: 1 1 auto;
}
.font24 {
  font-size: 24px;
}
.g-full-in .line:after {
  content: " / ";
  display: inline-block;
  margin: 0 32px;
}
.font12 {
  font-size: 12px;
}
.cursor {
  cursor: pointer;
}
.g-full-in {
  .buy {
    color: #0da88b;
  }
  .sell {
    color: #ef5656;
  }
  .indent {
    margin-bottom: 8px;
  }
}
.font-gray {
    color: #9aa5b5;
}
.font-black {
    color: #495666;
}
//
.page_set{
  .g-user {
    width: 1200px;
    margin: 0 auto;
    .font5 {
      font-weight: 400;
    }
    .add-list {
        height: 78px;
        line-height: 78px;
        position: relative;
        span {
          margin-left: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
    }
    .add-list:before {
        content: "";
        display: block;
        border-top: 1px solid #e6ecf2;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        margin-left: 80px;
    }
  }
  .g-user-layout {
    border: 1px solid #e6ecf2;
    border-radius: 2px;
    margin-top: 24px;
  }
  .g-user-title {
    background-color: #f2f6fa;
    height: 48px;
    line-height: 48px;
    padding-left: 24px;
    border-bottom: 1px solid #e6ecf2;
    span[data-weight="1"] {
      color: #1c242c;
      font-weight: 400;
    }
    span[data-type="1"] {
        margin-left: 24px;
    }
  }
  .g-user-col {
    padding: 0 24px;
    overflow: hidden;
    .bot_line{
      border-bottom: 1px solid #e6ecf2;
    }
    .spe-radio-message{margin-left: 100px;}
  }
  .empty{min-height: 150px;}
  .g-user-list {
    min-height: 78px;
    position: relative;
    .m-layout-inner {
          max-width: 950px;
          display: flex;
          align-items: flex-start;
          word-break: break-all;
    }
    .left-in{
      .real-name {
        flex-shrink: 0;
        width: 130px;
        margin: 0 16px 0 24px;
      }
      .paynum{width: 300px;margin: 0 16px 0 24px;}
      .bank-info {
        max-width: 854px;
      }
    }
    // &:after {
    //     content: "";
    //     display: block;
    //     width: 100%;
    //     border-bottom: 1px solid #e6ecf2;
    //     position: absolute;
    //     bottom: 0;
    //     left: 0;
    //     margin-left: 80px;
    // }  
  }

}

.dataimg{
  img{width: 100%;max-width: 400px;}
}
</style>
